<script setup lang="ts">
	import {ref,reactive,getCurrentInstance} from "vue";
	import {shortOrderStatus} from '@/utlis/common.js'
	import { onLoad ,onReachBottom} from '@dcloudio/uni-app';
	
	import {userStore} from '@/pinia';
	import {useRouter} from 'uni-mini-router'
		

	const {proxy} = getCurrentInstance()	
	const router = useRouter()
	const userStoreInfo = userStore();
	// let userInfo = ref(userStoreInfo.getUserInfo)
	let tabList = reactive([{
			name: '全部',
			val:-1,
		}, {
			name: '待接单',
			val:0,
		}, {
			name: '待服务',
			val:1,
		}, {
			name: '待验收',
			val:2,
		}, {
			name: '已完成',
			val:3,
		}])
	let state = reactive({
		total:0,
		searchInfo:{
			shortWorkMemberId:userStoreInfo.getUserInfo.id,
			orderStatus:-1,
			pageNo:1,
			pageSize:10,
		},
		orderList:[]	
	})
	const tabClick = (e) => {
		state.searchInfo.pageNo = 1;
		state.orderList = []
		state.searchInfo.orderStatus = e.val
		getList()
	}
	
	const setShortOrderStatus = (val)=>{
		let idx =shortOrderStatus.findIndex(el=>el.value == val)
		let text = ''
		if(idx!=-1){
			text = shortOrderStatus[idx].name
		}else{
			text = ''
		}
		return text;
	}
	
	const getList = ()=>{
		proxy.$req('GET', proxy.$api.meiyeShortWordersOrderShortWorkList,state.searchInfo).then((res) => {
			state.total = res.result.total
			state.orderList = state.orderList.concat(res.result.records)
		})
	}
	
	onLoad(()=>{
		getList()
	})
	onReachBottom(() => {
		if(state.total>state.orderList.length){
			state.searchInfo.pageNo++
			getList()
		}
		
	})
	const routerLink = (e,item) => {
		console.log(item,'itemitem')
		router.push({
			name: 'serveDetail',
			params: {
				type: e,
				orderId:item.id
			}
		})
	}
</script>

<template>
	<u-navbar class="navbar"  bgColor="rgba(255, 255, 255, 0)" :placeholder="true" title="" :autoBack="true">
		<template #center>
			<view style="font-weight: 600;font-size: 36rpx;">短时工订单</view>
		</template>
	</u-navbar>
	<view class="main">
		<u-tabs 
		lineColor="#CB645E"
		lineWidth="50rpx"
		:activeStyle="{
		            color: '#CB645E',
		            fontWeight: '600',
					fontSize:'28rpx'
		        }"
		        :inactiveStyle="{
		            color: 'rgba(0,0,0,0.85)',
					fontSize:'28rpx'
		        }"
		itemStyle="padding:10rpx 36rpx; height: 34px;" :list="tabList" @click="tabClick"></u-tabs>
		<view  class="">
			<view class="mainBox" v-for="(item,idx) in state.orderList" :key="idx">
				<view class="mianBoxH">
					<view class="headL">
						{{item.employmentType==0?`日雇佣·${item.num}日`:`小时雇佣·${item.num}小时`}}
					<!-- 	{{item.employmentType == 1?'时雇佣':'日雇佣'}}
						{{item.num}} -->
					</view>
					<view class="headR">
						{{setShortOrderStatus(item.status)}}
					</view>
				</view>
				<view class="mainC">
					<view class="line">
						<view class="lineL">
							雇佣类型
						</view>
						<text class="lineR">{{item.employmentType==0?"按日":'按小时'}}</text>
						<!-- <text class="lineR">{{item.employerType	 == 1?'商家':'供应商'}}</text> -->
					</view>
					<view class="line">
						<view class="lineL">
							雇佣时间
						</view>
						<text class="lineR">{{item.employmentType == 1?item.employeeDateTime.workTime:item.employeeDateTime.workDate}}</text>
					</view>
					<view class="line">
						<view class="lineL">
							雇 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;主
						</view>
						<text class="lineR">{{item.employerName}}</text>
					</view>
					<view class="line">
						<view class="lineL">
							工作地点
						</view>
						<text class="lineR">{{item.address}}</text>
					</view>
					<view class="lineEnd">
						<view class="endR">
							<text class="xinzi">薪资</text><text class="yuan">￥</text><text class="num intFont">{{item.salary}}</text>
						</view>
					</view>
					<view class="btnBox">
						<view class="btn" v-if="item.status =='0' || item.status =='1'" @click="routerLink(0,item)">
							取消订单
						</view>
						<view class="btn" v-if="item.status =='0'" @click="routerLink(1,item)">
							接单
						</view>
						<view class="btn" v-if="item.status =='1'" @click="routerLink(2,item)">
							完成服务
						</view>
						<view class="btn" v-if="item.status =='2' || item.status =='3'" @click="routerLink(3,item)">
							查看订单
						</view>
					</view>
					
				</view>
			</view>
		</view>
	</view>
	
	
</template>

<style lang="scss" scoped>
	page{
		background-color: #FAFAFA;
	}
	.mainBox{
		width: 686rpx;
		height: 580rpx;
		background: #FFFFFF;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0,0,0,0.04);
		border: 2rpx solid #FFFFFF;
		margin:20rpx auto;
		border-radius: 20rpx;
		padding: 20rpx 10rpx;
		box-sizing: border-box;
		.mainC{
			margin-top: 20rpx;
			padding-bottom: 70rpx;
			.btnBox{
				display:flex;
				justify-content: flex-end;
				// padding: 0rpx 20rpx;
				.btn{
					color: rgba(203, 100, 94, 1);
					font-size: 28rpx;
					font-weight: 400;
					color: #CB645E;
					line-height: 40rpx;
					border:2rpx solid #e5b1ae;
					padding:10rpx 16rpx;
					border-radius: 6rpx;
					margin-right:20rpx;
				}
				// float: right;
				// width: 160rpx;
				// height: 64rpx;
				// background: rgba(255,255,255,0);
				// border-radius: 12rpx;
				// border: 2rpx solid #CB645E;
				// text-align: center;
				// .text{
				// 	font-size: 28rpx;
				// 	font-weight: 400;
				// 	color: #CB645E;
				// 	line-height: 64rpx;
				// }
			}
			.lineEnd{
				width: 650rpx;
				height: 100rpx;
				margin: 0 auto;
				padding: 10rpx 20rpx;
				box-sizing: border-box;
				.endR{
					float: right;
					.xinzi{
						display: inline-block;
						font-size: 32rpx;
						font-weight: 600;
						margin-right: 10rpx;
					}
					.yuan{
						font-size: 28rpx;
						font-weight: bold;
						color: #F22F19;
					}
					.num{
						font-size: 44rpx;
						font-weight: bold;
						color: #F22F19;
						line-height: 52rpx;
					}
				}
			}
			.line{
				width: 650rpx;
				height: 64rpx;
				padding: 0 20rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				.lineL{
					font-size: 28rpx;
					font-weight: 600;
					
				}
				.lineR{
					width: 460rpx;
					color: #3b3b3b;
					font-size: 28rpx;
					font-weight: 400;
					
				}
			}
		}
		
		.mianBoxH{
			height: 80rpx;
			padding: 10rpx 10rpx;
			box-sizing: border-box;
			display: flex;
			margin: 0 auto;
			justify-content: space-between;
			width: 654rpx;
			border-bottom: 1rpx solid rgba(0,0,0,0.05);
			.headL{
				font-size: 32rpx;
				font-weight: 600;
				color: #000000;
			}
			.headR{
				font-size: 28rpx;
				font-weight: 400;
				color: #F22F19;
			}
		}
	}
</style>
